<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getContextPath();
    Object role = request.getParameter("role");
    Object email = request.getSession().getAttribute("email");
    Object myRole = request.getSession().getAttribute("roleId");
%>
<html>
<head>
    <title>用户管理</title>
    <jsp:include page="../common/common-css.jsp"></jsp:include>
    <jsp:include page="../common/common-js.jsp"></jsp:include>
    <style type="text/css">
        a {
            text-decoration: none
        }

        a:hover {
            text-decoration: none
        }

        a:link {
            text-decoration: none
        }

        a:visited {
            text-decoration: none
        }
    </style>
</head>
<body style="background-color: #f5f5f5">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
         style="margin: 15px 0px;padding: 10px;background-color: #ffffff">
        <table style="width: 100%">
            <tr style="border-bottom: 1px solid #d3d3d3">
                <td style="padding: 5px">
                    <input type="text" placeholder="姓名/邮箱/手机号" id="queryKey"
                           style="width: 100%;border: none;padding: 5px">
                </td>
                <td align="center" style="padding: 5px;width: 150px">
                    <button class="btn btn-default-color search" style="width: 100%;padding: 5px">搜&nbsp;&nbsp;索
                    </button>
                </td>
            </tr>
        </table>
        <div id="usersArea">
            <table style="width: 100%;margin-top: 20px">
                <tr>
                    <td align="center" style="color: #d3d3d3;"><i class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在加载数据......
                    </td>
                </tr>
            </table>
        </div>
        <div id="users"></div>
        <table style="width: 100%;display: none;" id="loadMore">
            <tr>
                <td align="center" class="load" style="color: darkgrey;padding: 40px 0px">加载更多</td>
            </tr>
        </table>
        <table style="width: 100%;display: none;" id="loadOver">
            <tr>
                <td align="center" class="load" style="color: darkgrey;padding: 40px 0px"></td>
            </tr>
        </table>
    </div>
</div>
<jsp:include page="../../foot.jsp"></jsp:include>
</body>
<script language="JavaScript">
    var pageNo = 1;
    function loadUser(pageNo, pageSize, key) {
        var url = "<%=basePath%>/user/list";
        var role = <%=role%>;
        var myRole = <%=myRole%>;
        var param = {pageNo: pageNo, pageSize: pageSize, queryKey: key, role: role};
        $.post(url, param, function (data, status) {
            var users = data.paginator.items;
            $("#usersArea").hide();
            var item;
            var subItem;
            var logo;
            var alias;
            if (users.length > 0) {
                for (var i = 0; i < users.length; i++) {
                    logo = "<%=basePath%>/img/user.png"
                    if (users[i].logo != null && users[i].logo != '' && users[i].logo != undefined) {
                        logo = users[i].logo + "-120x120";
                    }
                    alias = users[i].name;
                    if (users[i].name == 'Your Name' || users[i].name == '') {
                        alias = users[i].email;
                    }
                    subItem = "";
                    item = "";
                    item += '<a href="<%=basePath%>/user/queryinfo?email=' + users[i].email + '">';
                    item += '<table style="width: 100%;margin-top: 5px;margin-bottom: 5px">';
                    item += '<tr>';
                    item += '<td align="center" style="width: 30px;">' + (index++) + '</td>';
                    item += '<td style="padding: 5px;width: 55px"align="center"><img style="width: 40px;height: 40px" class="img-responsive img-circle" src="' + logo + '"></td>';
                    item += '<td style="padding: 5px;border-bottom: 1px solid #f5f5f5;font-size: small">' + alias + '</td>';
                    if (myRole == 1) {
                        item += '<td style="padding-top: 5px;padding-bottom: 5px;padding-right: 10px;border-bottom: 1px solid #f5f5f5;"class="text-default-color"align="right">' + users[i].role + '</td>';
                    } else {
                        item += '<td style="padding-top: 5px;padding-bottom: 5px;padding-right: 10px;border-bottom: 1px solid #f5f5f5;"class="text-default-color"align="right">' + users[i].inCount + '</td>';
                    }
                    item += '</tr>';
                    item += '</table>';
                    item += '</a>';
                    $("#users").append(item);
                }
                if (users.length == pageSize) {
                    // - 还有更多数据
                    $("#loadOver").hide();
                    $("#loadMore").show();
                } else {
                    // - 没有更多数据
                    $("#loadMore").hide();
                    $("#loadOver").show();
                }
            } else {
                if (pageNo == 1) {
                    // - 没有数据
                    var noDataShow = '';
                    noDataShow += '<table style="width: 100%;margin-top: 20px">';
                    noDataShow += '<tr>';
                    noDataShow += '<td align="center" style="padding: 100px 0px"><h3 style="color: #cccccc;">All user will be Here</h3></td>';
                    noDataShow += '</tr>';
                    noDataShow += '</table>';
                    $("#users").empty();
                    $("#users").append(noDataShow);
                    $("#loadOver").hide();
                } else if (pageNo > 1) {
                    // - 没有更多数据
                    $("#loadMore").hide();
                    $("#loadOver").show();
                }
            }
        })
    }
    var index = 1;
    $(document).ready(function () {
        if (!validateEmail('<%=email%>')) {
            return;
        }
        initStyle();
        loadUser(pageNo++, 100, null);
        $("#loadMore").click(function () {
            var key = $.trim($("#queryKey").val());
            loadUser(pageNo++, 100, key);
        })

        $(".search").click(function () {
            var key = $.trim($("#queryKey").val());
            pageNo = 1;
            index = 1;
            $("#users").empty();
            loadUser(pageNo++, 100, key);
        })
    })
</script>
</html>
